<template>
  <div id="app">
    <headnavbar>
      <!-- #left 语法糖 等同于 name="left" -->
      <template #center>
        <div class="head_name">我的</div>
      </template>
    </headnavbar>
    <div class="content_back">
      <!-- 个人信息展示 -->
      <div class="personal">
        <!-- 编辑资料界面 -->
        <router-link to="/EditData">
          <div class="personal_top">
            <div class="center">
              <!-- 头像 -->
              <img
                class="photo"
                src="https://www.hualigs.cn/image/60364a03036ce.jpg"
                alt=""
              />
              <div class="dsec">
                <span class="desc_name">{{ userName }}</span>
                <img src="" alt="" />
              </div>

              <!-- 点击  > 进入编辑界面 -->
              <div class="edit">
                <img class="edit_left" src="./images/left_.png" alt="" />
              </div>
            </div>
          </div>
        </router-link>
        <!-- 横线 -->
        <div class="line"></div>
        <!-- 互相关注/关注/粉丝  由于三个跳转的地方一样 使用同样的跳转组件 -->
        <div class="personal_btn">
          <router-link to="/mutualattention">
            <div class="follow">
              <div class="follow_num">112</div>
              <div class="follow_name">互相关注</div>
            </div>
          </router-link>
          <router-link to="/Follow">
            <div class="follow">
              <div class="follow_num">222</div>
              <div class="follow_name">关注</div>
            </div>
          </router-link>
          <router-link to="/fan">
            <div class="follow">
              <div class="follow_num">333</div>
              <div class="follow_name">粉丝</div>
            </div>
          </router-link>
        </div>
      </div>
      <div class="kongbai"></div>
      <!-- 我发布的帖子 -->
      <router-link to="/Mypost">
        <div class="my_release">
          <div class="my_release_center">
            <img src="./images/my_.jpg" alt="" />
            <span class="my_release_name">我发布的帖子</span>
            <img class="my_release_img" src="./images/left_.png" alt="" />
          </div>
        </div>
      </router-link>
      <div class="kongbai"></div>
      <!-- 谁看过我 -->
      <router-link to="/lookme">
        <div class="my_release">
          <div class="my_release_center">
            <img src="./images/look_me.jpg" alt="" />
            <span class="my_release_name2">谁看过我</span>
            <img class="my_release_img" src="./images/left_.png" alt="" />
          </div>
        </div>
      </router-link>
      <div class="kongbai"></div>

      <!-- 安全设置/通用设置/客服在线 -->
      <div class="setting">
        <router-link to="/Security">
          <div class="my_release3">
            <div class="my_release_center">
              <img src="./images/safe.jpg" alt="" />
              <span class="my_release_name2">安全设置</span>
              <img class="my_release_img" src="./images/left_.png" alt="" />
            </div>
          </div>
        </router-link>
        <div class="line_"></div>
        <router-link to="/CurrencySet">
          <div class="my_release4">
            <div class="my_release_center">
              <img src="./images/set.jpg" alt="" />
              <span class="my_release_name2">通用设置</span>
              <img class="my_release_img" src="./images/left_.png" alt="" />
            </div>
          </div>
        </router-link>
        <div class="line_"></div>
        <router-link to="/CustomerService">
          <div class="my_release5">
            <div class="my_release_center">
              <img src="./images/email.jpg" alt="" />
              <span class="my_release_name2">客服在线</span>
              <img class="my_release_img" src="./images/left_.png" alt="" />
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import headnavbar from "../../components/HeadNavBar";
export default {
  data() {
    return {
      userName: ""
    };
  },
  components: {
    headnavbar
  },
  created() {
    this.userName = window.localStorage.Authorization;
  }
};
</script>
<style scoped>
.left {
  color: aqua;
}
a {
  text-decoration: none;
}
.head_name {
  margin: 0 auto;
}
.content_back {
  position: absolute;
  top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f3f3;
}
.personal {
  height: 120px;
  width: 100%;
  padding: 10px 0px 0px 0px;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
}
.personal_top {
  height: 60px;
  width: 100%;
  /* border-bottom: 1px solid #CCCCCC; */
  position: relative;
}
.center {
  height: 50px;
  width: 90%;
  position: absolute;
  left: 5%;
}
.photo {
  height: 49px;
  width: 49px;
  display: block;
  border-radius: 15%;
  position: absolute;
  top: 0;
  left: 3%;
}
.dsec {
  height: 23px;
  width: 91px;
  position: absolute;
  top: 13px;
  left: 24%;
}
.desc_name {
  font-size: 14px;
  color: #666666;
}
.location {
  height: 23px;
  width: 91px;
  position: absolute;
  top: 60%;
  left: 24%;
  font-size: 12px;
  color: #666666;
}
.line {
  width: 94%;
  height: 1px;
  background-color: #cccccc;
  margin-left: 3%;
}
.edit {
  height: 20px;
  width: 20px;
  top: 50%;
  right: 2%;
  position: absolute;
  transform: translateY(-50%);
}
.edit_left {
  height: 20px;
  width: 20px;
}
.personal_btn {
  height: 50px;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.follow {
  margin-top: 2px;
  height: 40px;
  width: 100px;
  text-align: center;
}
.follow_num {
  color: #00aeff;
  font-size: 12px;
}
.follow_name {
  color: #666666;
  font-size: 12px;
}
.kongbai {
  height: 10px;
}
.my_release {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
}
.my_release_center {
  width: 88%;
  height: 45px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.my_release_name {
  font-size: 12px;
  margin-left: -56%;
  /* align-items: flex-start; */
  color: #666666;
}
.my_release_name2 {
  font-size: 12px;
  margin-left: -65%;
  /* align-items: flex-start; */
  color: #666666;
}
.my_release3 {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  border-top: 1px solid #cccccc;
}
.my_release4 {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
}
.my_release5 {
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  border-bottom: 1px solid #cccccc;
}
.line_ {
  width: 85%;
  height: 1px;
  background-color: #cccccc;
  margin: 0 auto;
}
.setting {
  background-color: #ffffff;
}
</style>
